<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>图片所见即所得编辑</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    #markdown {
      margin-top: 5%;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/cherry-markdown@latest/dist/cherry-markdown.css">
  <link rel="Shortcut Icon" href="./logo/favicon.ico">
  <link rel="Shortcut Icon" href="../logo/favicon.ico">
  <link rel="Bookmark" href="../logo/favicon.ico">
</head>

<body>
  <div id="dom_mask" style="position: absolute; top: 40px; height: 20px; width: 100%;"></div>
  <div id="markdown"></div>
  <script>
    markdownSample = `## 点击预览区的图片来修改图片尺寸

![wysiwyg#80%#B](images/feature_image_wysiwyg.gif)
标准图片  ![一条dog#100px](images/demo-dog.png)
![bubble menu](images/feature_font.png)
![copy and paste](images/feature_copy.gif)
![图片尺寸](images/feature_image_size.png)
![表格图表](images/feature_table_chart.png)
![字体样式](images/feature_font.png)
![html转md](images/feature_copy.gif)
![br](images/feature_br.gif)
![br](images/feature_cursor.gif)
![wysiwyg](images/feature_image_wysiwyg.gif)
![wysiwyg](images/feature_export.png)
![wysiwyg](images/feature_myers.png)
![wysiwyg](images/feature_vdom.gif)
**效果**
标准图片  ![一条dog#B](images/demo-dog.png)
设置图片大小(相对大小&绝对大小)  ![一条dog#10%#50px](images/demo-dog.png)
设置图片对齐方式：
**左对齐**
![一条dog#auto#100px#left#border#radius](images/demo-dog.png)
**居中**
![一条dog#auto#100px#center#shadow#B](images/demo-dog.png)
**右对齐**
![一条dog#auto#100px#right#B#R#S](images/demo-dog.png)
**浮动左对齐**
![一条dog#auto#100px#float-left#border#shadow#radius](images/demo-dog.png)
开心也是一天，不开心也是一天
这样就过了两天，汪
**效果**
标准图片  ![一条dog#100px#R](images/demo-dog.png)
设置图片大小(相对大小&绝对大小)  ![一条dog#10%#50px](images/demo-dog.png)
设置图片对齐方式：
**左对齐**
![一条dog#auto#100px#left](images/demo-dog.png)
**居中**
![一条dog#auto#100px#center](images/demo-dog.png)
**右对齐**
![一条dog#auto#100px#right](images/demo-dog.png)
**浮动左对齐**
![一条dog#auto#100px#float-left](images/demo-dog.png)
开心也是一天，不开心也是一天
这样就过了两天，汪
**效果**
标准图片  ![一条dog#100px](images/demo-dog.png)
设置图片大小(相对大小&绝对大小)  ![一条dog#10%#50px](images/demo-dog.png)
设置图片对齐方式：
**左对齐**
![一条dog#auto#100px#left](images/demo-dog.png)
**居中**
![一条dog#auto#100px#center](images/demo-dog.png)
**右对齐**
![一条dog#auto#100px#right](images/demo-dog.png)
**浮动左对齐**
![一条dog#auto#100px#float-left](images/demo-dog.png)
开心也是一天，不开心也是一天
这样就过了两天，汪

# 例子
> [Github 地址](https://github.com/Tencent/cherry-markdown){target=_blank}

- [basic](index.html){target=_blank}
- [H5](h5.html){target=_blank}
- [多实例](multiple.html){target=_blank}
- [无 toolbar](notoolbar.html){target=_blank}
- [纯预览模式](preview_only.html){target=_blank}
- [注入](xss.html){target=_blank}
- [API](api.html){target=_blank}
- [图片所见即所得编辑尺寸](img.html){target=_blank}
- [标题自动序号](head_num.html){target=_blank}
  `;
  </script>
  <script src="https://cdn.jsdelivr.net/npm/cherry-markdown@latest/dist/cherry-markdown.js"></script>
  <script>
    var cherry = new Cherry({
      id: 'markdown',
      toolbars: {
        toolbar: ['bold', 'italic', 'strikethrough', '|', 'header', 'list', 'graph']
      },
      editor: {
        height: '70%'
      },
      previewer: {
        lazyLoadImg: {
        // 加载图片时如果需要展示loading图，则配置loading图的地址
        loadingImgPath: '',
        // 同一时间最多有几个图片请求，最大同时加载6张图片
        maxNumPerTime: 2,
        // 不进行懒加载处理的图片数量，如果为0，即所有图片都进行懒加载处理， 如果设置为-1，则所有图片都不进行懒加载处理
        noLoadImgNum: 3,
        // 首次自动加载几张图片（不论图片是否滚动到视野内），autoLoadImgNum = -1 表示会自动加载完所有图片
        autoLoadImgNum: 2,
        // 针对加载失败的图片 或 beforeLoadOneImgCallback 返回false 的图片，最多尝试加载几次，为了防止死循环，最多5次。以图片的src为纬度统计重试次数
        maxTryTimesPerSrc: 2,
        // 加载一张图片之前的回调函数，函数return false 会终止加载操作
        beforeLoadOneImgCallback: (img) => {return true;},
        // 加载一张图片失败之后的回调函数
        failLoadOneImgCallback: (img) => {},
        // 加载一张图片之后的回调函数，如果图片加载失败，则不会回调该函数
        afterLoadOneImgCallback: (img) => {},
        // 加载完所有图片后调用的回调函数
        afterLoadAllImgCallback: () => {alert('all img lond done')},
      },
      },
      value: markdownSample,
    });
  </script>
</body>

</html>
